<template>
	<view class="my-room">
		<zero-custom-bar class="myNav" title="包间列表" :isH5="true" :effect='false' :fixedHolder='true' :singleIcon="true" backgroundColor='#FFF'>
			<view slot='left'>
				<view @click="goBackPage" class="back-btn">
					<uni-icons type="left" size="24"></uni-icons>
				</view>
			</view>
			<view slot='right'>
				<view @click="toProductSetting" class="setting-btn">
					<uni-icons type="gear" size="24"></uni-icons>
				</view>
			</view>
		</zero-custom-bar>
		<view>
			<view class="tabs" v-if="tabs.length" :key="updateKey">
				<v-tabs :tabs="tabs" :zIndex="3" v-model="current" :scroll="false" bgColor="#FFF" color="#000"
					line-color="#ff9600" lineHeight='5rpx' active-color="#000" style="width: 100%" :lineScale="0.1"
					ref="tabs" @change="changeTab"></v-tabs>
			</view>
			<!-- 房间列表 -->
			<view class="container-tabs__list">
				<swiper class="container-tabs__swiper" :current="current" @animationfinish="animationFinished">
					<swiper-item class="swiper-item" v-for="(outItem, outIndex) in list" :key="outIndex">
						<scroll-view scroll-y class="scroll-box" @scrolltolower="getDataEvent">
							<view class="order-cart-list">
								<view>
									<roomItem :dataList="list[current].data" :shopId="shopId" @packageSetting="packageSetting"
										@editRoom="editRoom" @openPopEvent="openPopEvent"></roomItem>
								</view>
							</view>
							<view class="noMore" v-if="outItem.total === list[outIndex].data.length">暂无更多</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			<view class="footer-box">
				<view class="add-price" @click="setAllPacketTime">设置套餐时段</view>
				<view class="add-room" @click="addRoom">添加包间</view>
			</view>
		</view>
		<addGroup ref="addGroupDom">
			<view class="img-box">
				<image class="qrCode" :src="qrCodeUrl" mode="widthFix"></image>
			</view>
		</addGroup>
	</view>
</template>

<script>
	import addGroup from '@/components/add-group.vue'
	import roomItem from '@/components/room-item.vue'
	export default {
		components: {
			roomItem,
			addGroup
		},
		data() {
			return {
				updateKey:0,
				storeArray: [],
				tabs: [],
				tabsDetailArr:[],
				current: 0,
				shopId: '',
				list: [],
				qrCodeUrl: ''
			}
		},

		methods: {
			// 产品排序设置
			toProductSetting(){
				uni.navigateTo({
					url: `/pages/product-sort/product-sort?shopId=${this.shopId}`
				})
			},
			// 设置所有套餐时段
			setAllPacketTime() {
				uni.navigateTo({
					url: `/pages/time-setting/time-setting?shopId=${this.shopId}`
				})
			},
			// 添加包间
			addRoom() {
				uni.navigateTo({
					url: `/pages/room-setting/room-setting?shopId=${this.shopId}`,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						reload: (option) => {
							if (option.productType === '1') {
								// 新增包间
								this.current = 0
							} else if (option.productType === '2') {
								// 新增台球
								this.current = 1
							}
							this.getStoreProductionModel()
						}
					}
				})
			},
			// 编辑包间
			editRoom(item) {
				const productId = item.productId;
				uni.navigateTo({
					url: `/pages/room-setting/room-setting?productId=${productId}`,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						reload: (option) => {
							this.getStoreProductionModel()
						}
					}
				})
			},
			// 套餐设置
			packageSetting(item, index) {
				const productId = item.productId;
				uni.navigateTo({
					url: `/pages/package-setting/package-setting?productId=${productId}&shopId=${this.shopId}&packageStatus=${item.packageStatus}`,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						reload: (option) => {
							this.$set(item, 'packageStatus', option.packageStatus)
						}
					}
				})
			},
			// 打开弹窗
			openPopEvent(imgUrl) {
				this.qrCodeUrl = imgUrl
				this.$refs.addGroupDom.openPop()
			},

			// swiper划动加载
			animationFinished(e) {
				this.current = e.detail.current
				// 填充数据
				// this.fillData()
			},
			// tab切换加载
			changeTab(index) {
				this.current = index
				// 填充数据
				this.fillData()
			},
			// 填充数据方法
			fillData() {
				if (this.list[this.current].data.length < 1 && this.shopId) {
					// 当没有数据的时候才请求
					this.getData()
				}
			},
			// 滚动加载
			getDataEvent() {
				// 数据列表小于总列表数时请求
				if (this.list[this.current].data.length < this.list[this.current].total) {
					this.list[this.current].pageNum++
					this.getData()
				}
			},
			// 获取列表数据
			getData() {
				const data = {
					pageNum: this.list[this.current].pageNum,
					pageSize: 10,
					shopId: this.shopId,
					modelType: this.tabsDetailArr[this.current].modelType
				}
				this.$request({
					method: 'post',
					url: `/applet/store/product/manageList`,
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					const {
						total,
						rows
					} = res
					this.$set(this.list[this.current], 'data', [...this.list[this.current].data, ...rows])
					this.list[this.current].total = total
				})
			},
			// 获取门店产品类型
			getStoreProductionModel() {
				this.$request({
					method: 'get',
					url: `/applet/store/product/openModelList/${this.shopId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.tabsDetailArr = res?.data || []
					this.tabs = []
					this.list = []
					this.tabsDetailArr.forEach((item) => {
						this.tabs.push(item.modelName)
						this.list.push({
							loadmore: 'loadmore',
							pageNum: 1,
							total: 0,
							data: []
						})
					})
					this.updateKey++
					if (this.tabsDetailArr.length) {
						this.current = 0
						this.getData()
					}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 返回
			goBackPage() {
				uni.navigateBack(-1)
			}

		},
		onLoad(options) {
			this.shopId = options.shopId;
			this.getStoreProductionModel()
		}
	}
</script>

<style lang="scss" >
	.my-room {
		background: #FFF;
		padding-bottom: 120rpx;
        
	   .setting-btn{
		   text-align: center;
	   }

		.tabs {
			display: flex;
			align-items: center;
			width: 100%;
			height: 100rpx;
			box-sizing: border-box;
			background-color: #FFF;
			box-shadow: 0px 4px 10rpx rgba(0, 0, 0, 0.1);
		}

		.container-tabs__list {
			height: calc(100vh - 248rpx);

			.container-tabs__swiper {
				height: 100%;
			}
		}

		/* #ifdef H5 */
		.container-tabs__list {
			height: calc(100vh - 190px);
		}

		/* #endif */

		.scroll-box {
			height: 100%;
		}

		.order-cart-list {
			padding: 20rpx;
		}

		.noMore {
			text-align: center;
			padding: 32rpx 0;
			color: #CCC;
			font-size: 28rpx;
		}

		.img-box {
			text-align: center;

			.qrCode {
				width: 400rpx;
			}
		}

		.footer-box {
			position: fixed;
			width: 100%;
			box-sizing: border-box;
			bottom: 0;
			padding: 30rpx;
			display: flex;
			text-align: center;
			background: #FFF;

			.add-price {
				flex: 1;
				margin-right: 20rpx;
				background: #169bd5;
				color: #FFF;
				padding: 20rpx 40rpx;
				border-radius: 10rpx;
			}

			.add-room {
				flex: 1;
				background: #ff9600;
				color: #FFF;
				padding: 20rpx 40rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>